<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="/about">关于</a>
    <a href="/home">主页</a>
    <div id="app"></div>
</body>
<script>
    const routes = [
        {
            path:'/home',
            component:()=>{
                return "<h1>首页<h1>"
            }
        },
        {
            path:'/about',
            component:()=>{
                return "<h1>关于<h1>"
            }
        }

    ]
    let arr = document.querySelectorAll('a')
    arr.forEach((item)=>{
        item.addEventListener('click',function(e){
            e.preventDefault()
            console.log(location.pathname);
            
            history.pushState(null,'',this.getAttribute('href'))          //它指定了新的历史记录条目所对应的 URL。
            routerView(location.pathname)
        })
        function routerView(pathname){
            const index = routes.findIndex((item)=>{
                return item.path == pathname
            })
            app.innerHTML = routes[index].component()
        }

    })
</script>
</html>